<template>
  <q-btn round dense flat icon="g_translate">
    <q-tooltip>{{$t('language')}}</q-tooltip>
    <q-menu auto-close>
      <q-list style="min-width: 80px">
        <q-item
          clickable
          :active="lang === option.value"
          active-class="my-menu-link"
          @click="lang = option.value"
          v-for="(option) in langOptions"
          :key="option.value"
          >
            <q-item-section>{{option.label}}</q-item-section>
        </q-item>
      </q-list>
    </q-menu>
</q-btn>
</template>

<script>
export default {
  data () {
    return {
      lang: this.$i18n.locale,
      langOptions: [
        { value: 'en-us', label: 'English' },
        { value: 'zh-cn', label: '中文（简体）' },
        { value: 'zh-tw', label: '中文（台灣）' }
      ]
    }
  },
  watch: {
    lang (lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>
